<template>
  <v-container>
    <h3>Oxfor Dict</h3>
    <v-layout row wrap>
      <v-flex md12>
        <v-text-field
          v-model="search"
          @input="searchChange"
          @focus="searchChange"
          solo
          placeholder="search string"
        ></v-text-field>
          <v-list
            class="text-xs-left text-sm-left text-md-left text-lg-left text-xl-left px-3"
            v-for="word in this.$store.state.words.autoWords" :key="word.id"
          >
            <v-list-tile
              :key="word.id"
              :to="'/dict/' + word.word"
              @click="wordClick(word.word)"
            >
              <v-list-tile-title>{{ word.word }}</v-list-tile-title>
            </v-list-tile>
          </v-list>
      </v-flex>
      <v-flex md12>
        <router-view :word="word" />
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {

  name: 'OxfordDict',

  data () {
    return {
      search: '',
      searchRules: [
        v => (v && v.length <= 20) || 'search must be less than 20 characters'
      ],
      word: {}
    }
  },
  methods: {
    searchChange (event) {
      this.$store.dispatch('autoList', this.search)
    },
    clearAutoList () {
      this.$store.commit('clearList')
    },
    wordClick (word) {
      console.log(word)
      this.clearAutoList()
    }
  },
  computed: {
    to () {
      if (this.word.word !== undefined) {
        return `/dict/${this.word.word}`
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>
